<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Model Item Group</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/navbar.css" rel="stylesheet">
    <link href="css/custom/modelItemGroup.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="css/font-awesome.min.css" rel="stylesheet">

</head>
<body class="scrollbar">
<!--start 导航条-->
<div class="head navbar-static-top">
    <nav class="navbar navbar-default pcnav" role="navigation">
        <div class="container-fluid" >
            <div class="row">
                <div class="col-sm-12">
                    <div class="navbar-header" >
                        <button id="phoneBtn" type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="javascript:void(0)mycollapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="../index.html" class="navbar-brand">
                        </a>
                    </div>
                    <div class="collapse navbar-collapse">
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>
<!--end 导航条-->
<div class="clearfix"></div>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-2">
                    <div class="logoPanel">
                        <img src="images/model/water3.jpg" />
                        <h2>Hydrological Theme</h2>
                    </div>
                    <div class="navbarPanel">
                        <!--将 <ul> 标签与 <li> 标签一起使用，创建无序列表。-->
                        <ul class="navigation">
                            <!-------------------------------Themes-------------------------------->
                            <li>
                                <!--javascript:void(0)创建了一个超级链接，当用户点击以后不会发生任何事-->
                                <a href="javascript:void(0)" index=0>
                                    <!--<i> 标签显示斜体文本效果。-->
                                    <i class="fa fa-info-circle fa-fw"></i>
                                    <!--span用于对文档中的行内元素进行组合。-->
                                    <span>Theme Info</span>
                                </a>
                                <!--<ul class="subNavbar">-->
                                    <!--<li>-->
                                        <!--<a href="javascript:void(0)" index=1>Lake Tai</a>-->
                                    <!--</li>-->
                                    <!--<li>-->
                                        <!--<a href="javascript:void(0)" index=2>Urban</a>-->
                                    <!--</li>-->
                                    <!--<li>-->
                                        <!--<a href="javascript:void(0)" index=3>Others</a>-->
                                    <!--</li>-->
                                <!--</ul>-->
                            </li>
                            <!-------------------------------Models-------------------------------->
                            <li>
                                <a href="javascript:void(0)" index=1>
                                    <i class="fa fa-th-large fa-fw"></i>
                                    <span>Models</span>
                                    <!--<i class="fa fa-chevron-right pull-right arrow"></i>-->
                                </a>
                                <ul class="subNavbar">
                                    <li id="model-distributedmodels">
                                        <a href="javascript:void(0)" index=1>Distributed Models</a>
                                    </li>
                                    <li id="model-parametricmodels">
                                        <a href="javascript:void(0)" index=2>Lumped and Parametric Models</a>
                                    </li>
                                </ul>
                            </li>
                            <!-------------------------------Data-------------------------------->
                            <li>
                                <a href="javascript:void(0)" index=3>
                                    <i class="fa fa-database fa-fw"></i>
                                    <span id="sidebar-data">Data</span>
                                    <!--<i class="fa fa-chevron-right pull-right arrow"></i>-->
                                </a>
                                <!--<ul class="subNavbar">-->
                                    <!--<li>-->
                                        <!--<a href="javascript:void(0)" index=3>inp</a>-->
                                    <!--</li>-->
                                    <!--<li>-->
                                        <!--<a href="javascript:void(0)">ASTER GDEM</a>-->
                                    <!--</li>-->
                                    <!--<li>-->
                                        <!--<a href="javascript:void(0)">Others</a>-->
                                    <!--</li>-->
                                <!--</ul>-->
                            </li>
                            <!-------------------------------Applications-------------------------------->
                            <li>
                                <a href="javascript:void(0)" index=4>
                                    <i class="fa fa-cubes fa-fw"></i>
                                    <span id="applications">Applications</span>
                                    <!--<i class="fa fa-chevron-right pull-right arrow"></i>-->
                                </a>
                                <ul class="subNavbar">
                                    <!--<li>-->
                                        <!--<a href="javascript:void(0)">WebSWMM</a>-->
                                    <!--</li>-->
                                    <!--<li>-->
                                        <!--<a href="javascript:void(0)">Applications2</a>-->
                                    <!--</li>-->
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-10">
                    <div class="infoPanel container-fluid" id="BasicInfoPanel">
                        <div class="title text-center">
                            <h3>
                                <span>Theme Info</span>
                            </h3>
                        </div>
                        <div class="info">
                            <p>Water is an important carrier of material movement and transformation in nature. The water cycle is an important material guarantee for the existence of life and economic and social development. Hydrological model is an important means to explore and understand water cycle and hydrological process, and also an effective tool to solve practical problems such as hydrological forecasting, water resources planning and management, hydrological analysis and calculation. At present, the problems of water, water, water and water are increasing. The impact of climate change and human activities on the water cycle and the rise of digital hydrology have created good opportunities for the research, development and application of hydrological models. huge challenge. The hydrological model is a mathematical model constructed for simulating the water cycle process and used to describe hydrophysical processes. It is one of the important methods and methods of hydrological science research. Research and application of hydrological models. It provides people with an important tool and method for scientific understanding and rational use of water resources, and provides an important scientific basis for water resources management and decision-making.</p>
                            <p>
                            The hydrological model is not only an important part of the field of hydrological science research, but also an important research work in other fields related to the water cycle. The development of hydrological models can be traced back to the inference formula proposed by Mulvaney in 1851. The unit line of Sherman in 1932, the infiltration equation of Horton in 1933, and the evaporation formula of Penman in 1948 are the signs of significant progress in hydrological simulation technology. In the 1960s, the digital revolution triggered by computer technology laid a good foundation and guarantee for the rapid development of hydrological models. The Stanford model of Crawford and Linsley in 1966 was the product of this digital revolution.</p>
                            <p>
                                The Xinanjiang model came out. Since then, with the rapid development of computer technology, new hydrological models of the basin have emerged. Since the 1960s, the hydrological model has flourished. Hydrologists at home and abroad have developed many well-known conceptual hydrological models, such as Stanford model, HBV model, API model, Xin'anjiang model, SSARR model, ARNO model, SCS model, HEC-1 model, etc. Especially in recent decades, with the rapid development of computer technology, the development and application of hydrological models have been favored and paid attention by the majority of hydrologists. Various hydrological models have sprung up, from conceptual hydrological models. Up to the recently popular distributed hydrological model, various research, development and application work are emerging.</p>
                            <p><img
                                    style="display: block; margin-left: auto; margin-right: auto;"
                                    src="images/model/SWMMModel.png"
                                    alt="" width="278" height="212">
                            </p>
                            <p class="text-center">
                                &nbsp;SWMM - Storm Water Management Model
                            <p>
                                This topic collects some models including lumped hydrological models and distributed hydrological models. Some of these models can be accessed by jumping to the OpenGMS portal through this website. Other models can be found and accessed on their portals.In addition, this topic also contains some application cases of the model, the most typical is the application case of the SWMM model. You no longer need to download the SWMM model to the machine. Instead of driving the model to run in a complex application interface, you can load and configure the data online. You can run the model and download the calculation results in a few simple steps.
                            </p>
                            <h4>Lumped and Parametric Models</h4>
                            <ul>
                                <li>SWM (Stanford Watershed Model);</li>
                                <li>APEX (Agricultural Policy/Environmental eXtender);</li>
                                <li>HEC-HMS (Hydrologic Modeling System);</li>
                                <li>MIKE 11;</li>
                                <li>UEB (Utah Energy Balance Snowmelt Model);</li>
                                <li>WATFLOOD (Hydrological Model and Forecasting System);</li>
                                <li>RORB;</li>
                                <li>TANK;</li>
                                <li>SSARR (Streamflow Synthesis and Reservoir Regulation);</li>
                                <li>ARNO (ARNO rainfall—runoff model);</li>
                                <li>Sacramento Model;</li>

                            </ul>
                            <p>&nbsp;</p>  <h4>Distributed Models</h4>
                            <ul>
                                <li>SWMM (Storm Water Management Model);</li>
                                <li>SWAT (Soil and Water Assessment Tool);</li>
                                <li>FVCOM (The Unstructured Grid Finite Volume Community Ocean Model);</li>
                                <li>BDS (Digital Watershed System Application Development Software);</li>
                                <li>Ecomsed;</li>
                                <li>CEQUEAU;</li>
                                <li>C2VGSM (Central Valley Groundwater and Surface Water Model);</li>
                                <li>IWFM (Integrated Water Flow Model);</li>
                                <li>KINEROS2 (Kinematic Runoff and Erosion Model, Version 2);</li>
                                <li>MIKE SHE;</li>
                                <li>TOPIKAPI (TOPographic Kinematic Approximation and Integration);</li>
                                <li>HSPF (Environmental Modeling Community of Practice);</li>
                                <li>新安江模型 (Xin'anjiang Model);</li>
                                <li>陕北模型 (Northern Shaanxi Model);</li>
                            </ul>
                            <p class="text-right">Reference：芮孝芳,蒋成煜,张金存.流域水文模型的发展[J].水文,2006(03):22-26.</p>

                        </div>
                    </div>

                    <div class="infoPanel container-fluid modelPanel">
                        <div class="title text-center">
                            <h3>
                                <span>Distributed Models</span>
                            </h3>
                        </div>
                        <div class="x_content" id="distributed-modelList">
                            <!--<div class="row">-->
                            <!--<p>Media gallery design emelents</p>-->
                            <!--<div class="col-md-55">-->
                            <!--<div class="thumbnail">-->
                            <!--<div class="image view view-first">-->
                            <!--<img src="images/model/thumb.png" alt="image" />-->
                            <!--<div class="mask">-->
                            <!--<p>Your Text</p>-->
                            <!--</div>-->
                            <!--</div>-->
                            <!--<div class="caption">-->
                            <!--<p>Snow and Ice Incoming for the South</p>-->
                            <!--</div>-->
                            <!--</div>-->
                            <!--</div>-->
                            <!--</div>-->
                        </div>
                        <div class="expand text-center">
                            <a class="expandBtn">
                            </a>
                            <!--<a class="expandBtn">Expand&nbsp;-->
                                <!--<i class="fa fa-caret-down"></i>-->
                            <!--</a>-->
                        </div>
                            <!--<div class="row">-->
                                <!--<div class="col-sm-2">-->
                                    <!--<div class="modelThumbnail">-->
                                        <!--<a href="http://geomodeling.njnu.edu.cn/model/modelItemInfo/Yjc2NWYyMWEtODIzNS00ZWRkLWI0YjYtOGRmMGU0ZWVhM2Q4NTA%3D" target="_blank">-->
                                            <!--<div class="picPanel">-->
                                                <!--<img src="images/model/thumb.png">-->
                                            <!--</div>-->
                                            <!--<div class="modelDetail"></div>-->
                                        <!--</a>-->
                                        <!--<ul class="modelNav clearfix">-->
                                            <!--<li class="pull-left">-->
                                                <!--<a href="http://geomodeling.njnu.edu.cn/model/computableModelInfo/OWU5ZWYyNjctYWI3OS00NjM2LWJhMmEtOTA1NTg1MGM3ZDI2N2E%3D" target="_blank">-->
                                                    <!--<i class="fa fa-tasks"></i>-->
                                                <!--</a>-->
                                            <!--</li>-->
                                            <!--<li class="pull-right" title="PitRemove">-->
                                                <!--PitRemove-->
                                            <!--</li>-->
                                        <!--</ul>-->
                                    <!--</div>-->
                                    <!--<div class="modelThumbnailTitle">-->
                                        <!--<p>PitRemove</p>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                    </div>

                    <div class="infoPanel container-fluid modelPanel">
                        <div class="title text-center">
                            <h3>
                                <span>Parametric Models</span>
                            </h3>
                        </div>

                        <div class="x_content" id="parametric-modelList">

                        </div>
                            <!--<div class="row">-->
                                <!--<div class="col-sm-2">-->
                                    <!--<div class="modelThumbnail">-->
                                        <!--<a href="javascript:void(0)">-->
                                            <!--<div class="picPanel">-->
                                                <!--<img src="images/model/thumb.png">-->
                                            <!--</div>-->
                                            <!--<div class="modelDetail"></div>-->
                                        <!--</a>-->
                                        <!--<ul class="modelNav clearfix">-->
                                            <!--<li class="pull-left">-->
                                                <!--<a href="javascript:void(0)">-->
                                                    <!--<i class="fa fa-tasks"></i>-->
                                                <!--</a>-->
                                            <!--</li>-->
                                            <!--<li class="pull-right" title="AspectAnalysis_FrmDiff">-->
                                                <!--AspectAnalysis_FrmDiff-->
                                            <!--</li>-->
                                        <!--</ul>-->
                                    <!--</div>-->
                                    <!--<div class="modelThumbnailTitle">-->
                                        <!--<p>AspectAnalysis_FrmDiff</p>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <div class="expand text-center">
                            <a class="expandBtn">Expand&nbsp; <i class="fa fa-caret-down"></i></a>
                        </div>
                    </div>

                    <div class="infoPanel container-fluid dataPanel">
                        <div class="title text-center">
                            <h3>
                                <span>Data</span>
                            </h3>
                        </div>
                        <div class="x_content" id="data-list">

                        </div>
                        <!--<div class="info clearfix">-->
                            <!--<div class="row">-->
                                <!--<div class="col-sm-2">-->
                                    <!--<div class="modelThumbnail">-->
                                        <!--<a href="javascript:void(0)">-->
                                            <!--<div class="picPanel">-->
                                                <!--<img src="images/model/411.png">-->
                                            <!--</div>-->
                                            <!--<div class="modelDetail"></div>-->
                                        <!--</a>-->
                                        <!--<ul class="modelNav clearfix">-->
                                            <!--<li class="pull-left">-->
                                                <!--<a href="javascript:void(0)">-->
                                                    <!--<i class="fa fa-download"></i>-->
                                                <!--</a>-->
                                            <!--</li>-->
                                            <!--<li class="pull-right" title="Landsat 8 OLI_TIRS 卫星数字产品">-->
                                                <!--Landsat 8 OLI_TIRS 卫星数字产品-->
                                            <!--</li>-->
                                        <!--</ul>-->
                                    <!--</div>-->
                                    <!--<div class="modelThumbnailTitle">-->
                                        <!--<p title="Landsat 8 OLI_TIRS 卫星数字产品">Landsat 8 OLI_TIRS 卫星数字产品</p>-->
                                    <!--</div>-->
                                <!--</div>-->
                                <!--<div class="col-sm-2">-->
                                    <!--<div class="modelThumbnail">-->
                                        <!--<a href="javascript:void(0)">-->
                                            <!--<div class="picPanel">-->
                                                <!--<img src="images/model/411.png">-->
                                            <!--</div>-->
                                            <!--<div class="modelDetail"></div>-->
                                        <!--</a>-->
                                        <!--<ul class="modelNav clearfix">-->
                                            <!--<li class="pull-left">-->
                                                <!--<a href="javascript:void(0)">-->
                                                    <!--<i class="fa fa-download"></i>-->
                                                <!--</a>-->
                                            <!--</li>-->
                                            <!--<li class="pull-right" title="Landsat 8 OLI_TIRS 卫星数字产品">-->
                                                <!--Landsat 8 OLI_TIRS 卫星数字产品-->
                                            <!--</li>-->
                                        <!--</ul>-->
                                    <!--</div>-->
                                    <!--<div class="modelThumbnailTitle">-->
                                        <!--<p>Landsat 8 OLI_TIRS 卫星数字产品</p>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    </div>

                    <div class="infoPanel container-fluid applicationPanel" id="applicationPanel">
                        <div class="title text-center">
                            <h3>
                                <span>Applications</span>
                            </h3>
                        </div>
                        <div class="x_content" id="application-list">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<!-- jQuery -->
<script src="js/jquery-3.3.1.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.js"></script>



<!--My js-->
<script src="js/custom/modelItemGroup.js"></script>
<script src="js/custom/DataItemGroup.js"></script>
<script src="js/custom/applicationItemGroup.js"></script>
<!--<script src="js/test.js"></script>-->
</html>